<template>
  <el-container>
    <el-header>
      <div class="left-panel">

        <el-button
          icon="el-icon-magic-stick"
          :disabled="selection.length==0"
          v-auth="['system:dataMaintain:optimize']"
          @click="handleOptimize"
        >优化表</el-button>

        <el-button
          icon="el-icon-delete"
          :disabled="selection.length==0"
          v-auth="['system:dataMaintain:fragment']"
          @click="handleClear"
          >清理碎片</el-button>

      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input v-model="queryParams.name" clearable placeholder="请输入表名"></el-input>

          <el-tooltip class="item" effect="dark" content="搜索" placement="top">
            <el-button type="primary" icon="el-icon-search" @click="handlerSearch"></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="清空条件" placement="top">
            <el-button icon="el-icon-refresh" @click="resetSearch"></el-button>
          </el-tooltip>

        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <maTable
        ref="table"
        :api="api"
        rowKey="name"
        :column="column"
        @selection-change="selectionChange"
        stripe
        remoteSort
        remoteFilter
      >
        <el-table-column type="selection" width="50"></el-table-column>
        
        <el-table-column
          label="表名称"
          prop="name"
          width="180"
          :show-overflow-tooltip="true"
        ></el-table-column>

        <el-table-column
          label="表引擎"
          prop="engine"
        ></el-table-column>

        <el-table-column
          label="总行数"
          prop="rows"
        ></el-table-column>

        <el-table-column
          label="碎片大小"
          prop="data_free"
        >
          <template #default="scope">
            {{ $TOOL.formatSize(scope.row.data_free) }}
          </template>
        </el-table-column>

        <el-table-column
          label="数据大小"
          prop="data_length"
        >
          <template #default="scope">
            {{ $TOOL.formatSize(scope.row.data_length) }}
          </template>
        </el-table-column>

        <el-table-column
          label="索引大小"
          prop="index_length"
        >
          <template #default="scope">
            {{ $TOOL.formatSize(scope.row.index_length) }}
          </template>
        </el-table-column>

        <el-table-column
          label="字符集"
          prop="collation"
          width="180"
          :show-overflow-tooltip="true"
        ></el-table-column>

        <el-table-column
          label="创建时间"
          prop="created_at"
          width="160"
        >
          <template #default="scope">
            {{scope.row.create_time.substr(0, 10)}}
          </template>
        </el-table-column>

        <el-table-column
          prop="comment"
          label="表注释"
          :show-overflow-tooltip="true"
        ></el-table-column>

        <el-table-column label="操作" fixed="right" align="right">
          <template #default="scope">

            <el-button
            type="text"
            v-auth="['system:dataMaintain:detailed']"
            @click="handleDetail(scope.row.name)"
          >查看</el-button>
            
          </template>
        </el-table-column>

      </maTable>
    </el-main>

    <el-dialog
      title="表结构数据"
      v-model="dialogVisible"
      destroy-on-close
      @closed="dialogVisible = false"
      width="50%"
    >

      <el-table :data="columnList" stripe>

        <el-table-column prop="column_name" label="字段名称">
        </el-table-column>

        <el-table-column prop="column_type" label="字段类型">
        </el-table-column>

        <el-table-column prop="column_comment" label="字段注释" :show-overflow-tooltip="true">
        </el-table-column>

      </el-table>

      <template #footer class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </template>

    </el-dialog>

  </el-container>

</template>

<script>

  export default {
    name: 'system:dataMaintain',

    data() {
      return {
        dialog: {
          save: false
        },
        dialogVisible: false,
        column: [],
        api: { list: this.$API.dataMaintain.getPageList },
        selection: [],
        queryParams: {
          name: undefined,
        },
        // 当前记录
        record: { url: '' }
      }
    },
    methods: {

      // 显示表字段
      handleDetail (name) {
        this.$API.dataMaintain.getDetailed(name).then(res => {
          this.columnList = res.data
          this.dialogVisible = true
        })
      },

      //表格选择后回调事件
      selectionChange(selection){
        this.selection = selection;
      },

      // 优化表
      handleOptimize () {
        this.$API.dataMaintain.optimize({ tables: this.names }).then(res => {
          res.success && this.$message.success(res.message)
        })
      },

      // 清理表碎片
      handleClear () {
        this.$API.dataMaintain.fragment({ tales: this.names }).then(res => {
          res.success && this.$message.success(res.message)
        })
      },

      //搜索
      handlerSearch(){
        this.$refs.table.upData(this.queryParams)
      },

      resetSearch() {
        this.queryParams = {
          name: undefined,
        }
        this.$refs.table.upData(this.queryParams)
      },

      //本地更新数据
      handleSuccess(){
        this.$refs.table.upData(this.queryParams)
      }
    },
  }
</script>

<style>
</style>
